/*
 * @Author: tomystery 
 * @Date: 2018-06-23 11:58:27 
 * @Last Modified by: t
 * @Last Modified time: 2018-06-23 15:33:35
 * @filename:util/rich-editor/index.jsx
 */
import React from 'react';
import Simditor from 'simditor';
import 'simditor/styles/simditor.scss';
import './index.scss';

//通用富文本编辑器 ，依赖jquery

class RichEditor extends React.Component{
    constructor(props){
        super(props);
    }
    componentDidMount(){
        this.loadEditor();
    }
    componentWillReceiveProps(nextProps){
      if(this.props.defaultDetail !==nextProps.defaultDetail){
        //这是这个插件传值的方法,发现每次输入数字之后都会往前跑，不能拿detail了，应该拿defaultDetail
        this.simditor.setValue(nextProps.defaultDetail)
      }
        
    }
    loadEditor(){
        let element=this.refs['textarea'];
        this.simditor=new Simditor({
            textarea:$(element),
            defaultValue:this.props.placeholder || '请输入内容',
            upload:{
                url:'/manage/product/richtext_img_upload.do',
                defaultImage:'',
                fileKey:'upload_file'
            }
        });
        this.bindEditorEvent();
    }
    //初始化富文本编辑器的事件 这里我们要把jquery的事件暴露给外面变成我们组件的事件
    bindEditorEvent(){
        this.simditor.on('valuechanged',e=>{
            this.props.onValueChange(this.simditor.getValue());
        })
    }
    render(){
        return(
            <div className='rich-editor'>
               <textarea ref='textarea'></textarea>
            </div>
        )
    }
}

export default RichEditor;